<template>
    <div>
        <CommonHead></CommonHead>
        <div class="audio_play_box">
            <div class="audio_player">
                <div class="audio_wave" :class="{'isplay':isplay}"></div>
                <a href="javascript:void(0);" @click="togglePlay" class="audio_btn" :class="{'isplay':isplay}"></a>
            </div>
        </div>
        <audio ref="audio" :src="defalutAudio"></audio>
        <audio ref="audio2" :src="audioSrc"></audio>
        <div class="listsBox">
            <swiper ref="ceoSwiper" :options="swiperOption">
                <swiper-slide v-for="(value,itemIndex) in 7" :key="itemIndex">
                    <ul class="cf">
                        <li v-if="itemIndex == 0 && index < 6 " v-for="(value,index) in ceoAudio"
                            :key="index">
                            <div class="person_box_inner" :class="{person_pl:index%2==0,person_pr:index%2==1}">
                                <div class="person_head">
                                    <img :src="value.image" alt="">
                                </div>
                                <h3 class="person_name">{{value.name}}<a href="javascript:void(0);" class="person_audio"
                                                                         :class="value.playing?'isplay':''"
                                                                         @click="startAudio(value)"></a></h3>
                                <p class="person_pos">{{value.ceo}}</p>
                            </div>
                        </li>
                        <li v-if="itemIndex == 1 && index < 12 && index > 5" v-for="(value,index) in ceoAudio"
                            :key="index">
                            <div class="person_box_inner" :class="{person_pl:index%2==0,person_pr:index%2==1}">
                                <div class="person_head">
                                    <img :src="value.image" alt="">
                                </div>
                                <h3 class="person_name">{{value.name}}<a href="javascript:void(0);" class="person_audio"
                                                                         :class="value.playing?'isplay':''"
                                                                         @click="startAudio(value)"></a></h3>
                                <p class="person_pos">{{value.ceo}}</p>
                            </div>
                        </li>
                        <li v-if="itemIndex == 2 && index < 18 && index > 11" v-for="(value,index) in ceoAudio"
                            :key="index">
                            <div class="person_box_inner" :class="{person_pl:index%2==0,person_pr:index%2==1}">
                                <div class="person_head">
                                    <img :src="value.image" alt="">
                                </div>
                                <h3 class="person_name">{{value.name}}<a href="javascript:void(0);" class="person_audio"
                                                                         :class="value.playing?'isplay':''"
                                                                         @click="startAudio(value)"></a></h3>
                                <p class="person_pos">{{value.ceo}}</p>
                            </div>
                        </li>
                        <li v-if="itemIndex == 3 && index < 24 && index > 17" v-for="(value,index) in ceoAudio"
                            :key="index">
                            <div class="person_box_inner" :class="{person_pl:index%2==0,person_pr:index%2==1}">
                                <div class="person_head">
                                    <img :src="value.image" alt="">
                                </div>
                                <h3 class="person_name">{{value.name}}<a href="javascript:void(0);" class="person_audio"
                                                                         :class="value.playing?'isplay':''"
                                                                         @click="startAudio(value)"></a></h3>
                                <p class="person_pos">{{value.ceo}}</p>
                            </div>
                        </li>
                        <li v-if="itemIndex == 4 && index < 30 && index > 23" v-for="(value,index) in ceoAudio"
                            :key="index">
                            <div class="person_box_inner" :class="{person_pl:index%2==0,person_pr:index%2==1}">
                                <div class="person_head">
                                    <img :src="value.image" alt="">
                                </div>
                                <h3 class="person_name">{{value.name}}<a href="javascript:void(0);" class="person_audio"
                                                                         :class="value.playing?'isplay':''"
                                                                         @click="startAudio(value)"></a></h3>
                                <p class="person_pos">{{value.ceo}}</p>
                            </div>
                        </li>
                        <li v-if="itemIndex == 5 && index < 36 && index > 29" v-for="(value,index) in ceoAudio"
                            :key="index">
                            <div class="person_box_inner" :class="{person_pl:index%2==0,person_pr:index%2==1}">
                                <div class="person_head">
                                    <img :src="value.image" alt="">
                                </div>
                                <h3 class="person_name">{{value.name}}<a href="javascript:void(0);" class="person_audio"
                                                                         :class="value.playing?'isplay':''"
                                                                         @click="startAudio(value)"></a></h3>
                                <p class="person_pos">{{value.ceo}}</p>
                            </div>
                        </li>
                        <li v-if="itemIndex == 6 && index < 42 && index > 35" v-for="(value,index) in ceoAudio"
                            :key="index">
                            <div class="person_box_inner" :class="{person_pl:index%2==0,person_pr:index%2==1}">
                                <div class="person_head">
                                    <img :src="value.image" alt="">
                                </div>
                                <h3 class="person_name">{{value.name}}<a href="javascript:void(0);" class="person_audio"
                                                                         :class="value.playing?'isplay':''"
                                                                         @click="startAudio(value)"></a></h3>
                                <p class="person_pos">{{value.ceo}}</p>
                            </div>
                        </li>
                    </ul>

                    <div class="swiper-button-next"></div>

                    <div class="swiper-button-prev"></div>
                </swiper-slide>
            </swiper>

        </div>
        <div>
            <a href="javascript:void(0);" class="assiter_btn btn_assit" @click="goAssitorForm">成为助力者</a>
            <a href="javascript:void(0);" class="volunteer_btn btn_assit" @click="goVolunteer">成为志愿者</a>
        </div>
        <div class="assis_bot"></div>
    </div>
</template>
<script>
  import CommonHead from "@/components/CommonHead";
  import ceoAudio from "@/ceo";

  require("swiper/dist/css/swiper.css");
  import {swiper, swiperSlide} from "vue-awesome-swiper";

  export default {
    data() {
      return {
        audioSrc: "",
        isplay: false,
        isplay2: false,
        ceoAudio: ceoAudio,
        audioIndex: 0,
        defalutAudio: 'https://zhiyangzhuli.oss-cn-beijing.aliyuncs.com/ceozhuli.mp3',
        swiperOption: {
          direction: "horizontal",
          loop: true
        }
      };
    },
    components: {
      CommonHead,
      swiper,
      swiperSlide,
    },
    computed: {
      swiper() {
        return this.$refs.ceoSwiper.swiper;
      }
    },
    mounted() {
      // this.$nextTick(() => {
      //     let mySwiper = this.swiper;
      //         mySwiper.slides.on(
      //             "touchmove",
      //             function(e) {
      //                 e.stopPropagation();
      //             })
      //
      // })
    },
    methods: {
      startAudio(value) {
        this.$refs.audio2.pause();
        this.isplay = false;
        this.$refs.audio2.src = value.audio;
        // this.ceoAudio.forEach(ele => {
        //     ele.playing = false;
        // });

        value.playing = !value.playing;
        if (value.playing) {
          this.$refs.audio2.play();
          this.$refs.audio.pause();
        } else {
          this.$refs.audio2.pause();
        }
        this.ceoAudio.forEach(ele => {
          if(ele.name == value.name){
            ele.playing = value.playing;
          }else{
            ele.playing = false;
          }
        });
      },
      togglePlay() {
        this.isplay = !this.isplay;
        if (this.isplay) {
          this.$refs.audio.play();
          this.$refs.audio2.pause();
        } else {
          this.$refs.audio.pause();
        }
      },
      goAssitorForm() {
        this.$router.replace({
          name: 'assitorForm',
          query: {
            type: 'assit'
          }
        });
      },
      goVolunteer() {
        this.$router.replace({
          path: "/agreements"
        });
      }
    }
  };
</script>
<style scoped>
    .swiper-button-prev, .swiper-button-next {
        width: 30px;
        height: 23px;
    }

    .audio_play_box {
        width: 7.5rem;
        padding: 0.23rem 0.38rem;
    }

    .audio_play_box .audio_player {
        border: 2px solid red;
        height: 1.17rem;
        border-radius: 0.2rem;
        width: 100%;
        position: relative;
    }

    .audio_play_box .audio_wave {
        width: 5.34rem;
        height: 1.17rem;
        position: absolute;
        top: 0;
        left: 0.76rem;
        background-image: url(~@/assets/images/audio_wave.png);
        background-size: 100% 100%;
        background-position: 0 0;
    }

    .audio_play_box .audio_wave.isplay {
        animation: audioWaveAnimate 10s linear infinite;
        -webkit-animation: audioWaveAnimate 10s linear infinite;
    }

    @keyframes audioWaveAnimate {
        0% {
            background-position-x: 0;
        }
        100% {
            background-position-x: 5.34rem;
        }
    }

    @-webkit-keyframes audioWaveAnimate {
        0% {
            background-position-x: 0;
        }
        100% {
            background-position-x: 5.34rem;
        }
    }

    .audio_play_box .audio_btn {
        display: block;
        width: 0.68rem;
        height: 0.68rem;
        background-image: url(~@/assets/images/audio_btn.png);
        background-size: 100% 100%;
        position: absolute;
        top: 0.2rem;
        left: 50%;
        margin-left: -0.32rem;
    }

    .audio_play_box .audio_btn.isplay {
        width: 0.78rem;
        height: 0.78rem;
        top: 0.15rem;
        background-image: url(~@/assets/images/play_btn.png);
    }

    .listsBox li {
        width: 50%;
        height: 3.24rem;
        float: left;
        list-style: none;
    }

    .listsBox li.hasBg_l {
        background-image: url(~@/assets/images/bg_cloud_l.png);
        background-size: 3.8rem 1.65rem;
        background-position: 0 0.42rem;
        background-repeat: no-repeat;
    }

    .listsBox li.hasBg_r {
        background-image: url(~@/assets/images/bg_cloud_r.png);
        background-size: 3.8rem 1.65rem;
        background-position: 0 0.42rem;
        background-repeat: no-repeat;
    }

    .person_box_inner {
        padding-top: 0.14rem;
        padding-bottom: 0.13rem;
    }

    .person_box_inner.person_pl {
        padding-left: 0.55rem;
    }

    .person_box_inner.person_pr {
        padding-right: 0.55rem;
    }

    .person_head {
        width: 1.93rem;
        height: 1.93rem;
        margin: 0 auto;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0 0 18px rgba(34, 29, 18, 0.46);
    }

    .person_head img {
        width: 100%;
        height: 100%;
    }

    .person_name {
        font-size: 0.32rem;
        font-weight: bold;
        text-align: center;
        line-height: 0.4rem;
        margin-top: 0.24rem;
    }

    .person_name .person_audio {
        display: inline-block;
        width: 0.39rem;
        height: 0.39rem;
        background-image: url(~@/assets/images/audio_btn_xs.png);
        background-size: 100% 100%;
        vertical-align: bottom;
        margin-left: 0.14rem;
    }

    .person_name .person_audio.isplay {
        background-image: url(~@/assets/images/play_btn.png);
    }

    .person_pos {
        font-size: 0.24rem;
        text-align: center;
        color: #e60012;
        line-height: 1;
        /* line-height: 0.24rem; */
        margin-top: 0.01rem;
        /* margin-top: 0.16rem; */
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0.1rem 0.1rem;
        display: block;
    }

    .assis_bot {
        width: 7.5rem;
        height: 1.6rem;
        background-image: url(~@/assets/images/assis_bot.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
</style>

